<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width:700px;
				height:500px;
				background: chartreuse;
				margin:0 auto;
			}
			#div2{
				width:500px;
				height:300px;
				background: coral;
				margin:0 auto;
			}
			#div3{
				width:200px;
				height:200px;
				background: cornflowerblue;
				margin:0 auto;
				
				/*定位为了说明:跟他视觉效果在哪儿没关系,跟html结构有关系*/
				/*position:absolute;
				top:600px;*/
			}
		</style>
		<script>
			window.onload = function(){
				var oDiv1 = document.getElementById("div1");
				var oDiv2 = document.getElementById("div2");
				var oDiv3 = document.getElementById("div3");
//				第三个参数为true时,事件流为事件捕获
//				oDiv1.addEventListener('click',function(){
//					alert('div1');
//				},true);
//				oDiv2.addEventListener('click',function(){
//					alert('div2');
//				},true);
//				oDiv3.addEventListener('click',function(){
//					alert('div3');
//				},true);
				
				
				oDiv1.addEventListener('click',function(){
					alert('div1');
				},false);
				
				oDiv2.addEventListener('click',function(){
					alert('div2');
				},false);
				oDiv3.addEventListener('click',function(){
					alert('div3');
				},false);
				
				oDiv1.addEventListener('click',function(){
					alert('div1');
				},true);
				
			}
//			事件冒泡 从内向外走
			
		</script>
	</head>
	<body>
		<div id="div1">
			div1
			<div id="div2">
				div2
				<div id="div3">div3</div>
			</div>
		</div>
	</body>
</html>
